<style lang='less'>
.account-setting-vue {}
</style>
<template>
  <div class=" h-panel frame-page">
    <div class="h-panel-bar">
      <Button @click="addRole">
        创建角色
      </Button>
    </div>
    <div class="h-panel-body">
      <Table ref="table" :datas="datas">
      <TableItem title="ID" prop="id" width="50" />
      <TableItem title="角色名称" prop="name" is-tree-opener />
      <TableItem title="操作">
        <template #default="{ data }">
          <Button size="s" color="primary" @click="edit(data)">编辑
          </Button>
          <Poptip content="确认删除?" @confirm="confirm(data)">
            <Button size="s" class="h-btn h-btn-s h-btn-red">
              删除
            </Button>
          </Poptip>
        </template>
      </TableItem>
    </Table>
    </div>
    

    <Modal v-model="openEditModal" title="编辑菜单">
      <RoleEdit :dept="currentD" @close="openEditModal = false" @submit="saveEdit"></RoleEdit>
    </Modal>
  </div>
</template>

<script>
import Request from '@js/common/request';
import RoleEdit from './components/role-edit.vue';
import { loading, message } from 'heyui';
export default {
  components: { RoleEdit },
  data() {
    return {
      openEditModal: false,
      datas: [],
      currentD: {},
      isEdit: false,
      addSubItem: false,
    };
  },
  mounted() {
    loading('加载中');
    this.getRoles();
  },
  methods: {
    getRoles() {
      Request.Management.roles().then(resp => {
        console.log(resp.data)
        this.datas = resp.data
        setTimeout(()=>{
          // this.$refs.table.expandAll();
          loading.close();
        }, 300)
      });
    },
    edit(menu) {
      this.currentD = menu;
      this.openEditModal = true;
      this.isEdit = true;
    },
    addRole(menu) {
      this.currentD = {  };
      this.openEditModal = true;
      this.addSubItem = true;
      this.isEdit = false;
    },
    saveEdit(form, isEdit) {
      loading('加载中');
      console.log(form)
      const formData = form;
      if (this.isEdit) {
        Request.System.updateRole(formData).then(resp => {
          this.afterSave(resp)
        })
      } else {
        Request.System.addRole(formData).then(resp => {
          this.afterSave(resp);
        })
      }

    },
    afterSave(resp, msg) {
      console.log('after save:', resp)
      if (resp.ok) {
        this.openEditModal = false;
        message({ type: 'success', text: msg|| '保存成功' })
        loading.close();
        this.getRoles()
      } else {
        message({
          type: 'error',
          text: resp.msg
        });
        loading.close();
      }
    },
    confirm(menu) {
      Request.System.removeMenu(menu.id).then(resp => {
        this.afterSave(resp, "删除成功")
      })
    }
  }
};
</script>